<template>
  <div>
    <div class="root">
      <van-nav-bar title="活动人数设置" left-arrow @click-left="onClickLeft" />
      <div class="context">
        <van-form @submit="onSubmit" class="van-form">
          <van-field
            v-model="minuser"
            label="最少人数"
            placeholder="请输入"
            :rules="[
              { required: true, message: '不能为空' },
              { validator: maxuserRule2, message: '请先修改最小人数不为0' },
            ]"
          />
          <van-field
            v-model="maxuser"
            label="最大人数"
            placeholder="请输入"
            :rules="[
              { required: true, message: '不能为空' },
              { validator: maxuserRule1, message: '最大人数不能小于最小人数' },
            ]"
          />
          <div class="subMit-button">
            <van-button
              class="subMit-buttonIcon"
              native-type="submit"
              :color="minuser != 0 && maxuser != 0 ? '#f3b361' : '#b5b5b5'"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      //最小人数
      minuser: 0,
      //最大人数
      maxuser: 0,
    };
  },
  methods: {
    //校验成功传递值和场景变换
    onSubmit() {
      this.$emit("setPeopleRuleSuccess", {
        minuser: parseInt(this.minuser),
        maxuser: parseInt(this.maxuser),
      });
      //清空数据
      this.minuser = 0;
      this.maxuser = 0;
    },
    onClickLeft() {
      this.$emit("setPeopleSceneChange");
    },
    //表单最大人数校验
    maxuserRule1() {
      if (parseInt(this.maxuser) >= parseInt(this.minuser)) {
        return true;
      } else {
        return false;
      }
    },
    maxuserRule2() {
      if (parseInt(this.minuser) == 0) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.root {
  width: 750px;
  height: 1993px;
  margin: 0 auto;
  font-size: 30px;
  background: #f7f7f7;
}
.context {
  width: 698px;
  height: 170px;
  margin: 0 auto;
  margin-top: 20px;
  width: 698px;

  border-radius: 12px;
  background: #ffffff;
}
.subMit-button {
  margin: 0 auto;
  height: 173px;
  width: 323px;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}
.subMit-buttonIcon {
  display: block;
  margin: 0 auto;
  width: 323px;
  height: 92px;
}
.van-form {
  padding-left: 24px;
}
</style>
